<template>
  <view class="page" v-if="shenheStatus == 0">
    <view class="page-bg">
      <view></view>
    </view>
    <view class="content">
      <pageHeader :data="data"></pageHeader>

      <view class="page-price">
        <view class="hd">
          <view class="hd-let">
            <view class="em">
              今日奖励(元)
              <i
                class="iconfont icon-browse"
                v-if="showMoney"
                @click="showMoney = !showMoney"
              ></i>
              <i
                class="iconfont icon-Notvisible"
                v-else
                @click="showMoney = !showMoney"
              ></i>
            </view>
            <view class="num num2">{{
              showMoney ? data.today_money || "0.00" : "******"
            }}</view>
          </view>
        </view>

        <view class="bd">
          <view class="item">
            <view class="em">总已结算金额(元)</view>
            <view class="num">{{ data.send_money || "0.00" }}</view>
          </view>

          <view class="item">
            <view class="em">总待结算金额(元)</view>
            <view class="num">{{ data.no_send_money || "0.00" }}</view>
          </view>
        </view>
      </view>

      <view class="list">
        <view class="hd">
          <view class="hd-let">
            <picker @change="bindPickerChange" mode="date" fields="month">
              <view class="time">{{ getTime }}</view>
            </picker>

            <i class="iconfont icon-arrow-down"></i>
          </view>
          <view class="hd-rig">
            累计奖励金额<text>{{ data.total || "0.00" }}</text
            >元
          </view>
        </view>

        <view class="item" v-for="item of list" :key="item.id">
          <view class="item-hd flex">
            <view class="let name">{{ item.profit_name }}</view>
            <view class="num">+{{ item.money }}</view>
          </view>
          <view class="item-bd flex">
            <view class="let time">{{ item.created_at }}</view>
            <view class="status" v-if="item.is_refund == 1">已退款</view>
            <view
              v-else
              :class="['status', item.is_send !== '1' ? 'on' : '']"
              >{{ item.is_send === "1" ? "已到账" : "未到账" }}</view
            >
          </view>
        </view>
      </view>

      <toolsMore :status="moreStatus"></toolsMore>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
import pageHeader from "../components/page-header.vue";
import { profitList } from "../api/index";

export default {
  components: {
    Shenhe,
    pageHeader,
    toolsMore
  },

  data() {
    return {
      date: "2023年4月",
      showMoney: true,
      type: 1,
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      data: null,
      time: "",
      show: false
    };
  },

  computed: {
    getTime() {
      let { time } = this;
      if (time) {
        let [year, month] = time.split("-");
        return `${year}年${month}月`;
      }

      return "";
    }
  },

  onLoad() {
    this.time = this.$utils.getNowFormatDate();
    this.profitList();
  },

  methods: {
    async profitList() {
      try {
        let { list: oldList, page, type } = this;

        this.moreStatus = 2;
        const res = await profitList({
          page,
          type,
          limit: 20
        });

        this.moreStatus = 1;

        if (!res.code) {
          let {
            avatar,
            id,
            level_name,
            name,
            total,
            list,
            no_send_money,
            send_money,
            today_money,
            row_count
          } = res.data;

          this.data = {
            avatar,
            id,
            level_name,
            name,
            no_send_money,
            send_money,
            today_money,
            total
          };
          if (list.length) {
            oldList.push(...list);
            this.page = this.page + 1;
          }

          if (oldList.length >= parseInt(row_count)) {
            this.isEnd = true;
            this.moreStatus = 3;
          }
        }
      } catch (error) {
        uni.showToast({
          title: error,
          duration: 2000,
          icon: "none"
        });
      }
    },

    bindPickerChange(e) {
      let { value: time } = e.detail;

      this.time = time;
      this.clearData();
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.profitList();
    }
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.profitList();
  }
};
</script>

<style lang="less" scoped>
.page {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding: 0rpx 24rpx 60rpx;
}

.content {
  position: relative;
  z-index: 3;
}

.page-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 152rpx;
  background: #f0250e;

  view {
    height: 124rpx;
    background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
  }
}

.page-price {
  padding: 48rpx 52rpx;
  border-radius: 0px 0px 20rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;

  .hd {
    display: flex;
  }

  .hd-let {
    flex: 1;
    overflow: hidden;

    .iconfont {
      margin-left: 10rpx;
    }
  }

  .hd-rig {
    padding-top: 4rpx;
  }

  .em {
    padding-bottom: 4rpx;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 38rpx;
    color: #262626;
    font-weight: bold;

    &.num2 {
      font-size: 68rpx;
    }
  }

  .bd {
    display: flex;
    align-items: center;
    padding-top: 40rpx;

    .item {
      flex: 1;
      overflow: hidden;
    }
  }
}

.iconfont {
  position: relative;
  top: 4rpx;
  font-size: 36rpx;
  color: #8c8c8c;
}

.list {
  margin-top: 24rpx;
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;

  .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;

    .hd-let {
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: bold;
      color: #262626;

      .time {
        font-size: 30rpx;
        font-weight: bold;
        color: #262626;
      }

      .iconfont {
        position: relative;
        top: -2rpx;
        color: #262626;
      }
    }

    .hd-rig {
      overflow: hidden;
      font-size: 24rpx;
      color: #8c8c8c;

      text {
        color: #f0250e;
      }
    }
  }

  .item {
    padding: 24rpx 0;
    border-top: 1rpx solid #f8f8f8;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .let {
        flex: 1;
        padding-right: 10rpx;
        overflow: hidden;
      }
    }
  }

  .item-hd {
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
  }

  .status {
    font-size: 24rpx;
    color: #8c8c8c;

    &.on {
      color: #f0250e;
    }
  }
}

.time {
  font-size: 24rpx;
  color: #8c8c8c;
}

.iconfont {
  display: inline-block;
}
</style>
